<template>
    <div class="hello-5">
        <van-tabbar class="hello-5-all"
                    v-model="active"
                    active-color="#37CD86"
                    inactive-color="#999999">

            <van-tabbar-item class="hello-5-bottom"
                             replace
                             to="/Homepage"
                             icon>
                <!-- <router-link to="/"> -->
                <span>首页</span>
                <img class="Size"
                     slot="icon"
                     slot-scope="props"
                     :src="props.active ? icon1[0].active : icon1[0].inactive" />
            </van-tabbar-item>

            <van-tabbar-item class="hello-5-bottom"
                             replace
                             to="/Foster"
                             icon="Foster">
                <span>认养</span>
                <img class="Size"
                     slot="icon"
                     slot-scope="props"
                     :src="props.active ? icon2[0].active : icon2[0].inactive" />
            </van-tabbar-item>
            <van-tabbar-item class="hello-5-bottom"
                             replace
                             to="/Live"
                             icon="Live">
                <span>直播</span>
                <img class="Size"
                     slot="icon"
                     slot-scope="props"
                     :src="props.active ? icon3[0].active : icon3[0].inactive" />
            </van-tabbar-item>
            <van-tabbar-item class="hello-5-bottom"
                             replace
                             to="/Store"
                             icon="Store">
                <span>认购</span>
                <img class="Size"
                     slot="icon"
                     slot-scope="props"
                     :src="props.active ? icon4[0].active : icon4[0].inactive" />
            </van-tabbar-item>
            <van-tabbar-item class="hello-5-bottom"
                             replace
                             to="/HamDivision"
                             icon="HamDivision">
                <span>我的</span>
                <img class="Size"
                     slot="icon"
                     slot-scope="props"
                     :src="props.active ? icon5[0].active : icon5[0].inactive" />
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
//import https from "./https.js";
export default {
    name: "tabBar",
    data() {
        return {
            active: this.logeid,
            icon1: [
                {
                    active: require("../assets/images/t1.png"),
                    inactive: require("../assets/images/t2.png")
                },
                {
                    active: "",
                    inactive: ""
                }
            ],
            icon2: [
                {
                    active: require("../assets/images/t8.png"),
                    inactive: require("../assets/images/t7.png")
                },
                {
                    active: "",
                    inactive: ""
                }
            ],
            icon3: [
                {
                    active: require("../assets/images/t6.png"),
                    inactive: require("../assets/images/t5.png")
                },
                {
                    active: "",
                    inactive: ""
                }
            ],
            icon4: [
                {
                    active: require("../assets/images/t10.png"),
                    inactive: require("../assets/images/t9.png")
                },

                {
                    active: "",
                    inactive: ""
                }
            ],
            icon5: [
                {
                    active: require("../assets/images/t4.png"),
                    inactive: require("../assets/images/t3.png")
                },
                {
                    active: "",
                    inactive: ""
                }
            ]
        };
    },
    // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
    // props 中的数据，都是只读的，无法重新赋值
    props: ["logeid"], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据

    created() {
        // console.log(this.logeid);
    },
    beforeMount() {
        // console.log(this.logeid);
    },

    mounted() {
        this.MockRequestApi(
            "api/pigList",
            "",
            this.icon1,
            this.icon2,
            this.icon3,
            this.icon4,
            this.icon5,
            ""
        );
    },
    methods: {
        homeFn() {
            this.active = 0;
        },
        FosterFn() {
            this.active = 1;
        },
        LiveFn() {
            this.active = 2;
        },
        StoreFn() {
            this.active = 3;
        },
        HamDivisionFn() {
            this.active = 4;
        },

        //请求模拟数据
        //MockRequestApi  模拟数据接口
        MockRequestApi(
            Url,
            Params,
            icon1Name,
            icon2Name,
            icon3Name,
            icon4Name,
            icon5Name,
            // eslint-disable-next-line no-unused-vars
            Urlimg
        ) {
            this.$https
                .fetchGet(Url, Params)
                .then(res => {
                    //console.log(res);
                    let newData = res.data.data;
                    switch (newData.code) {
                        case 1001:
                            console.log("查询成功!");
                            console.log(newData.result);

                            for (let i = 0; i < newData.result.length; i++) {
                                console.log(newData.result[0]);
                                if (i == 4) {
                                    //icon1
                                    console.log(icon1Name);
                                    for (let j = 0; j < newData.result[i].icon1.length; j++) {
                                        let icon1 = newData.result[i].icon1;
                                        (icon1Name[0].active = require("../assets/images/" +
                                            icon1[j].active +
                                            ".png")),
                                        (icon1Name[0].inactive = require("../assets/images/" +
                                                icon1[j].inactive +
                                                ".png"));
                                        // icon1Name.push({
                                        //   active: require("../assets/images/" +
                                        //     icon1[j].active +
                                        //     ".png"),
                                        //   inactive: require("../assets/images/" +
                                        //     icon1[j].inactive +
                                        //     ".png")
                                        // });

                                        console.log(icon1Name);
                                    }

                                    //icon2
                                    for (let j = 0; j < newData.result[i].icon2.length; j++) {
                                        let icon2 = newData.result[i].icon2;
                                        (icon2Name[0].active = require("../assets/images/" +
                                            icon2[j].active +
                                            ".png")),
                                        (icon2Name[0].inactive = require("../assets/images/" +
                                                icon2[j].inactive +
                                                ".png"));
                                    }

                                    //icon3
                                    for (let j = 0; j < newData.result[i].icon3.length; j++) {
                                        let icon3 = newData.result[i].icon3;
                                        (icon3Name[0].active = require("../assets/images/" +
                                            icon3[j].active +
                                            ".png")),
                                        (icon3Name[0].inactive = require("../assets/images/" +
                                                icon3[j].inactive +
                                                ".png"));
                                    }

                                    //icon4
                                    for (let j = 0; j < newData.result[i].icon4.length; j++) {
                                        let icon4 = newData.result[i].icon4;
                                        (icon4Name[0].active = require("../assets/images/" +
                                            icon4[j].active +
                                            ".png")),
                                        (icon4Name[0].inactive = require("../assets/images/" +
                                                icon4[j].inactive +
                                                ".png"));
                                    }

                                    //icon5
                                    for (let j = 0; j < newData.result[i].icon5.length; j++) {
                                        let icon5 = newData.result[i].icon5;
                                        (icon5Name[0].active = require("../assets/images/" +
                                            icon5[j].active +
                                            ".png")),
                                        (icon5Name[0].inactive = require("../assets/images/" +
                                                icon5[j].inactive +
                                                ".png"));
                                    }
                                }
                            }

                            break;
                        case 1002:
                            console.log("查询失败1!");
                            break;
                        default:
                            console.log("错误1!");
                            break;
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        //上拉加载
        onRefresh() {
            // this.$toast.loading({
            //   message: "加载中...",
            //   duration: 30000
            // });
            setTimeout(() => {
                // this.$toast("刷新成功");
                this.isLoading = false;
                this.count++;
                this.goods();
            }, 500);
        }
    }
};
</script>

<style scoped>
.hello-5 {
    display: flex;
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 60px;
    margin: auto;
    background: #fff;
}
.hello-5-all {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}
.hello-5-bottom {
    width: 20%;
    display: flex;
}

.Size {
    width: 25.984px;
    height: 25.984px;
}
</style>


